<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
      data 与 el 的两种写法：
        1. el 有两种写法
          - new Vue 时候配置 el 属性。
          - 先创建 Vue 实例 app，随后再通过 app.$mount('#root') 指定 el 的值。
        2. data 有两种写法
          - 对象式
          - 函数式
          - 如何选择：目前都可以，学习到组件后，data 必须使用函数式。
        3. 一个重要的原则
          由 Vue 管理的函数，一定不能写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。
    -->
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好啊！ {{name}}</h1>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示
    // el 的两种写法
    /* const app = new Vue({
        // el: '#root',  // 第一种写法
        data: {
            name: '凌宸'
        }
    })
    app.$mount('#root') // 第二种写法 */

    // data 的两种写法
    const app = new Vue({
        el: '#root',  
        // data: {  // 第一种写法，对象式
        //     name: '凌宸'
        // }
        data:function(){ // 第二种写法，函数式
            return {
                name: '凌宸'
            }
        }
    })
</script>
</html>